<template>
  <div class="contentBox">
    <div class="top">
      <el-button size="mini" type="primary" @click="addAnnouncement">
        发布公告
      </el-button>
    </div>
    <div class="tableBox">
      <el-table :data="tableData" height="100%" style="width: 100%">
        <el-table-column type="index" width="50" align="center">
        </el-table-column>
        <el-table-column sortable prop="time" label="日期" width="180">
        </el-table-column>
        <el-table-column
          prop="topic"
          label="标题"
          width="250"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column prop="content" label="内容" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="操作" width="180" align="center">
          <template slot-scope="scoped">
            <el-button type="text" size="mini" icon="el-icon-edit"
              @click="editAnnocement(scoped)"
              >编辑</el-button
            >
            <el-button
              type="text"
              size="mini"
              style="color: red"
              icon="el-icon-delete"
              @click="deleteAnnocement(scoped.row.id)"
              >删除</el-button
              
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog :title="tip" :visible.sync="dialogVisible" width="50%">
      <el-input
        placeholder="请输入标题"
        maxlength="20"
        show-word-limit
        style="padding-bottom: 20px"
        v-model="title"
      ></el-input>
      <el-input
        placeholder="请输入内容"
        type="textarea"
        maxlength="500"
        show-word-limit
        rows="8"
        v-model="content"
        style="padding-bottom: 20px"
      ></el-input>
      </el-date-picker>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleConfirm"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
       

<script>
export default {
  created() {
    //获取列表数据
    this.getAnnouncementList();
  },
  data() {
    return {
      // 表格数据
      tableData: [
        // {
        //   date: "2020-10-21",
        //   content:
        //     "尊敬的广大食客，本店定于农历几月几日至几月节放假，感谢大家对本店长期以来的支持惠顾，祝大家新春愉快，财源滚滚，生意兴隆。",
        //   title: "关于元旦的放假通知",
        // },
      ],
      dialogVisible: false,
      title: "",
      content: "",
      //用来标识是修改还是添加，默认为0
      flag:'',
      id:'',
      //弹出框标题
      tip:'',

    };
  },
  methods: {
    //编辑公告
    editAnnocement(scoped) {
      this.flag=1;
      this.id = scoped.row.id;
      this.title = scoped.row.topic;
      this.content = scoped.row.content;
      this.tip = '编辑公告';
      this.dialogVisible = true;
    },
    //删除公告信息
    async deleteAnnocement(id) {
      var _this =this;
      this.$confirm("请确认是否删除公告？")
                    .then(async _ => {
                      let param = {
                        id: id
                      }
                    let {data:res} =await this.$http.post(
                        "banservice/announcement/deletebyid", param
                        );
                    if(res.code == 20000) {
                        this.$message.success("删除成功");
                    }else {
                            _this.$message({
                            message: res.msg,
                            type: 'error'
                    });
                    }
                    _this.dialogVisible = false;
                    _this.getAnnouncementList();
                }).catch(()=>{
                
                });
    },
    //查询公告列表
   async getAnnouncementList() {
       let {data:res} =await this.$http.post("banservice/announcement/getallannouncement");
       this.tableData = res.data.list;
    },
    //添加公告
    addAnnouncement() {
      this.flag = 0;
      this.id = '';
      this.title = '';
      this.content = '';
      this.tip = '发布公告';
      this.dialogVisible = true;
    },
    //添加公告或者编辑公告
    handleConfirm() {
      if (this.title && this.content) {
        var _this =this;
        this.$confirm("请确认是否"+this.tip+"？")
                    .then(async _ => {
                      let param = ''
                      let url = ''
                      if(this.flag ===0) {
                        //发布公告
                        param = {
                          topic: this.title,
                          content: this.content
                        }
                        url = 'banservice/announcement/addannouncement';
                      } else if(this.flag ===1){
                        //编辑公告
                        param = {
                          id :this.id,
                          topic: this.title,
                          content: this.content
                        }
                        url = 'banservice/announcement/updateannouncement';
                      }
                    let {data:res} =await this.$http.post(
                        url, param
                        );
                    if(res.code == 20000) {
                        this.$message.success("发布成功");
                    }else {
                            _this.$message({
                            message: res.msg,
                            type: 'error'
                    });
                    }
                    _this.dialogVisible = false;
                    _this.getAnnouncementList();
                }).catch(()=>{
                
                });
      }
     // return this.$message.warning("请输入完整");
    },
  },
};
</script>

<style lang="less" scoped>
.contentBox {
  .top {
    padding-bottom: 20px;
  }
  .tableBox {
    height: 63vh;
  }
  /deep/ .hidden {
    display: none;
  }
}
</style>